import Vue from 'vue'
import VueRouter from 'vue-router' //第一步引入路由
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'

//全局使用mint-ui
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)



import app from './App.vue'//如果不写./会自动去node_modules去找
import router from './router.js'
Vue.use(VueRouter)//第二部主注册使用

//使用axios
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:3000/users";
Vue.prototype.$ajax = axios;

import moment from 'moment'
//定义时间的全局过滤器
Vue.filter('dateFmt', function(str,pattern="YYYY-MM-DD HH:mm:ss"){
    return moment(str).format(pattern);
});
//安装缩略图
import VuePreview from 'vue-preview'
// defalut install
Vue.use(VuePreview)
//Vuex的使用
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
    state:{
        //{goodsId:  title:  img: price :buynum, selected:该商品是否被选中}
        cars:[],
        ids:[]//保存的是数据库里的商品id
    },
    mutations:{ //不能写异步调用
        //mutations的方法有固定的两个参数，一个是state,一个是你要添加的数据
        addToCars(state,goodsinfo){
            //如果购物车中已经存在改商品，则只修改数量，
            //如果不存在则添加进去
            let flag = false;//保存商品是否存在购物车的状态
            state.cars.some(item=>{
                if(item.goodsId === goodsinfo.goodsId){
                        flag = true;
                        item.buynum += parseInt(goodsinfo.buynum);
                        return true;

                }
            });
            if(!flag){
                state.cars.push(goodsinfo);
            }
            //把购物车存储到本地
            localStorage.setItem("cars",JSON.stringify(state.cars));
           

        },
        //初始化购物车的方法
        carsInit(state,cs){//cs-->我们要从数据库里查询出来
            state.cars = cs;
        },
        //删除state中的对应的cars中的数据，然后和本地存储保持一致
        delItem(state,id){
            state.cars.some((item,i)=>{
                if(item.goodsId === id){
                    state.cars.splice(i,1);
                    return true;


                }
            });
            //保持本地一致
            localStorage.setItem("cars",JSON.stringify(state.cars));

        },
        //修改选中和补选中的状态
        updateSelected(state,obj){
            state.cars.some((item,i)=>{
                if(item.goodsId === obj.id){
                   item.selected = obj.val;//修改选中的状态
                    return true;
                }
            });
            //保持本地一致
            localStorage.setItem("cars",JSON.stringify(state.cars));


        },
        //修改购买的商品的数量
        updateNum(state,obj){
            state.cars.some((item,i)=>{
                if(item.goodsId === obj.id){
                   item.buynum = obj.val;//修改选中的状态
                    return true;
                }
            });
            //保持本地一致
            localStorage.setItem("cars",JSON.stringify(state.cars));
        },
        //给ids初始话
        idsInit(state,obj){
            state.ids = obj;

        }

    },
    getters:{
        //第一个参数也是固定的是state
        getNum(state){
            let num = 0;
            state.cars.forEach(item=>{
                num += parseInt(item.buynum)
            });
            return num;


        },
        getNumPrice(state){
            //返回总的购买的数量和总的价钱
            //但是要注意，如果没有选中的商品是不计入总价钱和总数量的
            let obj= {
                num:0,
                price:0
            }
            state.cars.forEach(item=>{
                if(item.selected){
                    obj.num += parseInt(item.buynum);
                    obj.price += parseInt(item.buynum) * parseFloat(item.price)
                }

            });

            return obj;

        }
    },
    // actions:{//异步，用来提交mutations里面的方法
    //     getCars(context,gs){//context == 》this.$store
    //         context.commit("carsInit",gs);
    //     }
    // }
})
const vm = new Vue({
    el:"#app",
    data:{},
    methods:{},
    render:c=>c(app),//createElements(),
    router,//注册路由对象
    store, //挂载vuex
    methods:{
        //获取数据库的购物车
        getCs(){
            this.$ajax({
                url:"/gwc",
                method:"get"

            }).then(resp=>{
                let ids = []//存储的是数据库的购物车所有的的商品的id
                resp.data.message.forEach(item=>{
                    ids.push(item.goodsId);
                    if(item.selected == 1){
                        item.selected = true;
                    }else{
                        item.selected = false;
                    }
                });
                this.$store.commit("carsInit",resp.data.message);//从数据库中调出来购物车
                this.$store.commit("idsInit",ids);
                //同时存储到本地中
                localStorage.setItem("cars",JSON.stringify(this.$store.state.cars));


            });

        }
    },
    created(){
        this.getCs();
    }

});
